<template>
  <div :style="{ fontSize: postFontSize + 'em' }">
    <BlogPost
      v-for="post in posts"
      :key="post.id"
      :title="post.title"
      @enlarge-text="postFontSize += 0.1"
    ></BlogPost>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import BlogPost from "@/components/blog/BlogPost.vue";
export default defineComponent({
  name: "blog",
  components: { BlogPost },
  data() {
    return {
      posts: [
        { id: 1, title: "My journey with Vue" },
        { id: 2, title: "Blogging with Vue" },
        { id: 3, title: "Why Vue is so fun" },
      ],
      postFontSize: 1,
    };
  },
});
</script>
<style lang="scss" scoped>
</style>